<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@0.6.2/marked.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="font_umx7maedfmp/iconfont.css">
  <title>Markdown Editor</title>
</head>
<body>
  <div id="notebook">
    <aside class="sidebar">
      <button v-on:click="addNote" class="alter">+添加</button>
      <ul>
        <!-- //选中当前笔记 -->
        <li v-for="note in notes" @click="selectNote(note)"
          v-bind:class="{selected: note === selectedNote}">
          {{note.title}}
          <template v-if="note.isActive">
            <span class="icon-favorite"></span>
          </template>
        </li>
      </ul>
    </aside>

    <template v-if="selectedNote">

      <section class="content">
        <input type="text" v-model="selectedNote.title"
          placeholder="笔记标题">
          
          <button @click="addNotes(selectedNote.isActive1)" 
          :class="{'icon-favorite': selectedNote.isActive,
          'icon-favorites': selectedNote.isActive1}"></button>
        <!-- <button @click="removeNote" class="b1"><img src="delete.png"></button>
        <button @click="starNote" class="b2"><img src="star.png"></button> -->
        <button @click="remoteNote" class="iconfont icon-delete"></button>
        <textarea rows="20" v-model="selectedNote.content"></textarea>
      </section>
      <aside class="preview" v-html="preview">
      </aside>
    </template>
  </div>
  <script src="script.js"></script>
</body>
</html> 